<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.4);
            /*width: 200px;*/
            /*height: 400px;*/
            position: fixed;/*固定定位 脱离文档 释放布局空间*/
            /*top:0;*/
            /*left:0;*/
            /*bottom:0;*/
            /*right:0;*/
            /* 视口（viewport）展示页面内容的整个窗口 vw  vh  */
            width: 100vw;/*撑满全屏宽 100%的视口宽度*/
            height: 100vh;/* 撑满全屏高 100%的视口高度*/
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta dolorem fugiat possimus, ullam vel! A ad
        esse veritatis. Distinctio ea, enim est id modi numquam pariatur perferendis tempore? Consectetur?
    </div>
    <div>Minus nobis quo repudiandae vel. Accusantium adipisci, doloremque ea esse nisi quae quis ratione sequi? Aliquid
        animi assumenda commodi dolore eveniet, harum incidunt neque numquam quidem quis quisquam reiciendis. Dolorem?
    </div>
    <div>Asperiores atque blanditiis cum cupiditate eius et nobis, quos tempore temporibus! Eius eum excepturi harum
        ipsa, odit perferendis placeat quae quod rem repellendus rerum sed sequi totam ut velit voluptates?
    </div>
    <div>A dolor fuga impedit nobis praesentium rem repellat ullam. Ad alias architecto at deserunt, eaque eligendi eum
        facere iure libero nam nihil porro possimus quia tempora ullam veritatis vero! Autem.
    </div>
    <div>Alias aliquam aperiam assumenda commodi deleniti dignissimos, dolor dolore doloribus eius hic, laborum,
        molestiae nam nobis nostrum numquam pariatur provident repellat sint sunt unde! Nam necessitatibus quibusdam
        suscipit ut vero!
    </div>
    <div>A blanditiis debitis, deserunt dicta fugiat ipsa quaerat quis reiciendis sequi sint tempore ut velit? Adipisci
        aliquid animi earum eos ex fugiat laborum, numquam odit officiis quo sequi tempora vel?
    </div>
    <div>Cumque doloremque est fugit in, nemo placeat tempore. Amet blanditiis dolore doloremque, earum fuga impedit,
        iure iusto labore modi necessitatibus neque nesciunt nobis nulla rem rerum vel veritatis voluptate voluptatem!
    </div>
    <div>Aliquid eos eveniet exercitationem hic minima nostrum quaerat repudiandae? Aliquam aliquid aperiam asperiores
        consequuntur doloribus et illum impedit inventore ipsa itaque iure magnam mollitia officia perferendis,
        praesentium, quam, tenetur ullam!
    </div>
    <div>Assumenda delectus deserunt dignissimos ducimus exercitationem explicabo fuga harum in inventore, magni nihil
        optio perferendis porro quasi reiciendis rem repellat repellendus reprehenderit sint ullam unde velit,
        voluptates voluptatibus. Maxime, optio.
    </div>
    <div>Adipisci amet at commodi, dicta doloribus earum eveniet id inventore laborum, mollitia nihil nostrum odit
        provident quo repellat sapiente sed tenetur voluptas! Accusamus dicta dignissimos maiores molestias possimus,
        quidem voluptatum.
    </div>
    <div>Alias, aliquam atque, consectetur, dicta dolorem dolores ea eaque eligendi et ex facilis hic labore laborum
        laudantium maxime molestiae necessitatibus omnis placeat possimus quis quo repellendus soluta tempore ut
        voluptas?
    </div>
    <div>Assumenda dolor doloribus in, ipsam, minima mollitia, necessitatibus neque omnis quas quod recusandae tempora.
        Alias aliquid, assumenda ea eligendi et facilis harum mollitia, non optio soluta suscipit vero! Impedit, labore?
    </div>
    <div>Ad adipisci, aperiam consectetur deleniti, deserunt doloribus eaque enim fuga nemo nostrum, veniam vero
        voluptatum? Aliquam aperiam consequatur cum eligendi esse impedit in labore laborum nisi, omnis provident
        suscipit voluptates!
    </div>
    <div>Blanditiis in non unde! A ad, amet atque eligendi excepturi fugit illum incidunt sed sint vero? Asperiores at
        facere incidunt inventore libero non numquam quia saepe similique suscipit vel, voluptas!
    </div>
    <div>Ab architecto, assumenda blanditiis consequuntur cumque deserunt dolores ea earum eos est eum fugit hic
        incidunt laudantium maiores minus molestiae odio optio perferendis quam quos sapiente suscipit totam voluptas
        voluptates.
    </div>
    <div>Animi asperiores culpa cupiditate deserunt dolorem doloremque ea eaque ex, exercitationem expedita facere iure
        magni nemo nihil pariatur perferendis porro quaerat, repellat repellendus tempora ut vel voluptatem
        voluptatibus! Blanditiis, distinctio?
    </div>
    <div>Adipisci architecto beatae, eos ex inventore iure iusto molestiae voluptates. Ab amet atque deserunt dolor
        ducimus eveniet fugit, id, iusto libero minus nemo, nulla quam rem tempore tenetur voluptatem voluptatibus!
    </div>
    <div>Assumenda at consequuntur cum cupiditate deserunt dicta dolores dolorum eaque eligendi esse explicabo fugiat,
        harum in ipsa iste laborum magnam minus neque nobis odio ratione recusandae totam unde veniam voluptatum!
    </div>
    <div>Accusantium amet deleniti doloremque explicabo hic ipsa laborum non odio porro provident quaerat sed sint sit,
        veritatis voluptas! Architecto ducimus maiores mollitia nihil perferendis provident, quas quod quos tenetur ut?
    </div>
    <div>Cumque delectus dolorum minus nemo temporibus. Aut debitis dicta ea eligendi incidunt, ipsam minima molestiae
        natus nemo neque non nostrum possimus quam quasi rerum temporibus vitae. Asperiores debitis error in.
    </div>
    <div>Accusantium, animi atque consectetur deserunt doloribus ea eos expedita fugit impedit ipsam itaque molestiae
        nobis non nulla praesentium, quos ratione saepe sequi voluptatem voluptatibus. Cupiditate distinctio facilis
        ipsam magnam magni.
    </div>
    <div>Ab ad culpa deleniti, dolore doloremque ipsum necessitatibus non odio odit, officiis omnis placeat repellat
        sed. Asperiores autem eaque eligendi est hic, inventore iure nam odio similique vel? Facilis, optio.
    </div>
    <div>Ad amet beatae cum dolores eligendi, ipsum labore maiores minus, molestias mollitia nemo nulla numquam odio
        pariatur perferendis quam quasi quia recusandae sed sequi sit ullam veniam vero, vitae voluptate.
    </div>
    <div>Ab at dolorem eveniet harum quaerat quidem recusandae rem repellat velit voluptatem. Ipsa omnis sapiente
        tenetur! Autem dignissimos, error eum eveniet ex, fuga id incidunt magnam maxime natus, odit repellat?
    </div>
    <div>Aperiam facere nobis possimus quia soluta. Asperiores autem beatae consequuntur deleniti enim est fugit iure
        labore laborum, laudantium minima, mollitia necessitatibus nesciunt odio odit, perspiciatis qui similique sit
        soluta voluptas.
    </div>
    <div>A ad, animi aperiam consectetur, corporis distinctio dolores dolorum ea explicabo harum itaque maxime minus
        obcaecati quibusdam quidem quod, repudiandae similique! Amet aperiam delectus minima omnis ratione, reiciendis
        ullam vitae.
    </div>
    <div>Aliquid, at blanditiis debitis dolore doloremque eaque eos esse excepturi hic in ipsa iste labore molestias nam
        neque nostrum praesentium quaerat quam quidem rem repudiandae sequi soluta velit vero voluptate!
    </div>
    <div>Aperiam expedita maiores officia officiis similique. A alias aperiam at aut consequuntur culpa ea eos error eum
        excepturi facilis incidunt odit, qui quisquam repellendus reprehenderit similique sit velit veniam voluptatem.
    </div>
    <div>Atque ea et eum exercitationem, ipsam minima molestiae nam nisi quae quam, quasi quisquam rerum, ut? Accusamus
        debitis hic molestiae nihil quam. Iste natus obcaecati quis quisquam repellendus tenetur voluptatem?
    </div>
    <div>At aut corporis et id molestiae nihil quidem reiciendis reprehenderit vel? Illum ipsam possimus reiciendis.
        Adipisci deleniti dolor impedit, maiores natus nemo nihil nisi perferendis quidem vitae? Consequatur
        necessitatibus, veritatis.
    </div>
    <div>Accusamus alias asperiores consequatur consequuntur corporis cum deleniti doloremque esse est eum eveniet
        explicabo fugiat harum illum maxime nemo neque nostrum odit placeat quaerat sint vel, veritatis. Asperiores,
        excepturi, quis.
    </div>
    <div>Alias culpa et impedit incidunt itaque iusto obcaecati odio porro quam quibusdam rem voluptate, voluptates!
        Asperiores corporis dolorum eum, minima, molestiae nam nisi omnis praesentium quasi quos ratione tempore vitae!
    </div>
    <div>Amet aperiam blanditiis consequatur corporis deleniti doloribus fuga id laudantium libero, magni modi neque
        odio omnis quam reprehenderit, sint voluptas. Alias excepturi harum illo ipsa nulla quam recusandae repudiandae
        voluptate!
    </div>
    <div>Adipisci aliquid asperiores aspernatur delectus eius enim error eum excepturi exercitationem fuga hic ipsum
        laboriosam, nemo nulla odit optio placeat quibusdam quod rem repellendus sequi similique soluta ullam unde
        voluptates.
    </div>
    <div>Adipisci aliquam amet, architecto culpa doloribus est incidunt laborum laudantium nulla officia pariatur
        placeat quam quia reprehenderit rerum sequi sit vero voluptate voluptatem voluptates. Commodi eligendi esse nam
        quod unde.
    </div>
    <div>Adipisci animi cum, dolorem molestiae perspiciatis quas sint ut vel? Delectus dicta distinctio esse facere
        magnam magni officia similique soluta veniam voluptate? A corporis debitis harum nihil quidem quos ut.
    </div>
    <div>Ad aliquam aliquid aut cumque, dolor dolores ducimus facere facilis harum, id ipsam ipsum nobis officiis,
        possimus quasi qui quibusdam quis similique ut voluptatem! Aliquam aut dolor esse obcaecati rem.
    </div>
    <div>Aliquid dolor earum et id, magni, modi nemo quo repellat suscipit tempora tempore tenetur voluptas. Aspernatur
        autem dicta dolorem dolorum, laudantium libero odio perspiciatis placeat velit voluptas! Est, facilis, ullam.
    </div>
    <div>At culpa cum distinctio fuga in, nam non quaerat, quam quisquam reiciendis similique veniam, vero. Alias
        maiores minima, mollitia quod rem sequi soluta. Dolore facilis sapiente sed sequi sunt ullam!
    </div>
    <div>Ad assumenda eum facere iste magni nesciunt optio perspiciatis provident? Assumenda culpa incidunt ipsum nisi
        pariatur! Debitis doloremque, dolores esse expedita laboriosam nostrum, nulla odio possimus quibusdam, sint ut
        veritatis!
    </div>
    <div>Amet architecto culpa cum eius esse harum in ipsa ipsam itaque labore, magnam maxime molestias neque nesciunt
        nulla omnis perferendis provident quos, reprehenderit saepe suscipit tenetur ut, vero vitae voluptatibus.
    </div>
    <div>Commodi debitis deserunt harum hic illo ipsam iure provident sed. Architecto consectetur deserunt illum, minus
        obcaecati odio praesentium qui quibusdam! Ad blanditiis culpa esse incidunt laudantium officia pariatur quos
        sequi.
    </div>
    <div>At aut cupiditate dicta earum et excepturi facere fuga harum, illum, inventore nesciunt nobis officiis pariatur
        quibusdam sit? Adipisci eveniet excepturi, explicabo nihil perferendis quibusdam reprehenderit. Inventore
        necessitatibus nihil sed.
    </div>
    <div>A amet assumenda at beatae deleniti dolore, eligendi enim error excepturi ipsam labore maxime nisi nobis non
        odit officiis perferendis perspiciatis qui quis repellat sapiente sit tempore totam, unde voluptate?
    </div>
    <div>Accusantium adipisci aliquid asperiores atque consectetur consequuntur culpa dolore ea eius ex excepturi
        impedit ipsum laboriosam minus non nostrum optio placeat porro quam quo repellendus similique sit vitae
        voluptas, voluptates?
    </div>
    <div>Adipisci aperiam atque aut commodi culpa cumque dolor esse et, excepturi exercitationem illo iusto natus nisi
        numquam odio omnis perspiciatis quo quos rem repudiandae saepe sunt tempore ut vitae voluptatem.
    </div>
    <div>Facilis illum laboriosam modi possimus ullam? Ad asperiores eos quaerat quasi repellendus saepe sunt? Dicta,
        itaque possimus. Consectetur doloremque maxime quaerat quod ut? Alias aperiam consectetur, ipsum minima nihil
        reiciendis.
    </div>
    <div>Adipisci alias aspernatur blanditiis esse incidunt iste modi molestias nam nobis sunt. Adipisci, alias, aliquam
        dignissimos doloremque ex facilis incidunt minima quas quia ratione rerum sint soluta ullam? Necessitatibus,
        vel?
    </div>
    <div>Alias at beatae blanditiis corporis culpa debitis deleniti eius, ex exercitationem expedita facilis id impedit,
        itaque laudantium mollitia necessitatibus nesciunt nihil officiis, quae quaerat qui quibusdam quo rem
        repudiandae vel.
    </div>
    <div>Accusamus aliquam aut consequatur culpa cupiditate eius est eum exercitationem fuga iste itaque iusto modi
        molestias non odio perspiciatis possimus qui quisquam rem, similique soluta suscipit tenetur velit veritatis
        voluptates.
    </div>
    <div>Ab adipisci alias animi architecto consequuntur deleniti dicta dolorem doloribus esse eum ex expedita facere
        harum ipsum natus provident quae quibusdam quod reprehenderit similique sit suscipit, tempora totam, ut veniam.
    </div>
    <div>Amet commodi eaque eos excepturi laboriosam magnam nihil nostrum qui? Accusamus at consectetur dolore eius,
        eveniet expedita fugit, impedit ipsum libero natus necessitatibus, nesciunt nostrum officia tempore vero
        voluptatem voluptatibus!
    </div>
    <div>Cumque nisi officiis soluta ullam. Et molestiae neque nihil quam quia quisquam quo quod? Aspernatur culpa
        dolore natus necessitatibus officia optio possimus quasi quia suscipit vitae. Eaque praesentium voluptas
        voluptates!
    </div>
    <div>Accusamus, accusantium architecto commodi corporis doloremque ex expedita, illo ipsum iure maiores perspiciatis
        quae quaerat quod reprehenderit temporibus? Aliquam debitis iure minima, nemo neque praesentium sequi tempore
        voluptas voluptates voluptatum!
    </div>
    <div>Aperiam architecto dolores ducimus ea earum, eum harum magni, quasi qui rerum similique, soluta veritatis. Aut
        culpa, laborum, laudantium minima quaerat quam, quia quis quo quos repudiandae tempora tenetur vel!
    </div>
    <div>Blanditiis cumque dolorum error molestiae sapiente, tempore unde. Alias harum illum impedit nam nesciunt
        placeat possimus suscipit voluptates. Ab asperiores beatae dignissimos eius eligendi laudantium molestias
        perspiciatis quas recusandae vero?
    </div>
    <div>Ab, alias aliquid atque beatae commodi consequuntur cum dicta doloribus, expedita hic illum iusto labore natus
        nesciunt numquam officia, officiis quas reiciendis repellendus repudiandae similique sit tempora vel velit
        voluptatibus?
    </div>
    <div>Accusamus amet aperiam doloremque earum est ex hic in, iusto laudantium magnam molestiae molestias officia
        placeat quae quibusdam recusandae rerum, suscipit tempora? Ab aliquam architecto aut cum laboriosam maxime
        ratione?
    </div>
    <div>Eum ipsum necessitatibus optio perferendis quia quibusdam velit voluptates! Blanditiis laboriosam libero nobis
        nulla officia provident quia similique unde! Cum debitis dicta doloribus eos ex fugit nisi nulla porro voluptas.
    </div>
    <div>Ab, alias aut laboriosam laborum libero modi necessitatibus. Error est fugit porro soluta! Cupiditate, eum
        eveniet magni neque sapiente similique sit. Commodi doloremque et maxime minus pariatur, quaerat ratione totam.
    </div>
</body>
</html>